<template>
	<view>
		<view style="padding:20upx">

			<view class="uni-form-item uni-column">
				<view class="title">真实姓名
					<text v-if="error_messages.nickname" class="text-red">{{ error_messages.nickname }}</text>
				</view>
				<input class="uni-input" v-model="form.nickname" placeholder="输入真实姓名" />
			</view>
			<view class="uni-form-item uni-column" v-if="companys.length">
				<view class="title">所属单位 
					<text v-if="error_messages.cid" class="text-red">{{ error_messages.cid }}</text>
				</view>
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" range-key="name">
					<view class="uni-input">{{multiArray[0][multiIndex[0]].name}} - {{multiArray[1][multiIndex[1]].name}}</view>
				</picker>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">设置密码 
					<text v-if="error_messages.password" class="text-red">{{ error_messages.password }}</text>
				</view>
				<input class="uni-input" v-model="form.password" password type="text" placeholder="密码" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">确认密码 
					<text v-if="error_messages.password2" class="text-red">{{ error_messages.password2 }}</text>
				</view>
				<input class="uni-input" v-model="form.password2" password type="text" placeholder="密码" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">手机号码
					<text v-if="error_messages.username" class="text-red">{{ error_messages.username }}</text>
				</view>
				<view style="display: flex">
					<input class="uni-input" style="flex:1 1 80%" v-model="form.username" type="text" placeholder="中国大陆手机号码" />
					<view class="my-input" style="flex:1 1 20%">
					<button @click="send_sms" style="height:100%; width:100%; padding:0px;font-size:16px;" :disabled="is_send" type="primary" size="mini">{{ send_txt }}</button>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">短信验证码
					<text v-if="error_messages.code" class="text-red">{{ error_messages.code }}</text>
				</view>
				<input class="uni-input" v-model="form.code" type="text" placeholder="请输入6位短信验证码" />
			</view>
			<view class="uni-form-item">
				<checkbox-group @change="jydd">
					<checkbox value="is_argee" />我已阅读并同意《保密协议》和《隐私权条款》
				</checkbox-group>
			</view>
		</view>
		<view style="padding:20upx">
			<button @click="submit_register" :disabled="is_submit" type="warn">注册</button>
			<navigator url="login" hover-class="navigator-hover">
				<button style="margin-top:15upx" type="default">登陆</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import * as API from 'server/getData'
	import * as types from 'store/mutations_types'
	export default {
		components: {
		},
		data() {
			return {
				timer: null,
				seconds: 60,
				multiIndex: [0, 0],
				multiArray: [[], []],
				companys: [],
				form: {
					nickname: '',
					username: '',
					password: '',
					password2: '',
					cid: '',
					code: ''
				},
				is_send: false,
				send_txt: '发送',
				is_submit: true,
				error_messages: []
			}
		},
		onLoad() {
			this.get_companys()
		},
		methods: {
			async get_companys() {
				let res = await API.articles.fetchCompanys()
				if (res.success === true) {
					this.companys = res.data.items
					this.multiArray[0] = [{'name': '请选择'}].concat(this.companys.filter((v) => v.pid === 0))
					// this.multiArray[0] = this.companys.filter((v) => v.pid === 0)
					this.multiArray[1] = [{'name': '请选择'}].concat(this.companys.filter((v) => v.pid !== 0))
				}
			},
			jydd: function (e) {
				this.is_submit = e.detail.value.length ? false : true;
			},
			async send_sms() {
				if (!(/^1[35678]\d{9}$/.test(this.form.username))) {
					uni.showToast({
                        icon: 'none',
                        title: '必须是手机号码'
                    })
					return false
				}
				this.is_send = true
				this.send_txt = '发送中'
				let res = await API.user.fetchCode({'tel': this.form.username})
				if (res.Code !== 'OK') {
					uni.showModal({
						title: '发送失败',
						content: res.message,
						showCancel:false
					})
					this.is_send = false
				}
				this.send_txt = '已发送'
				this.timer = setInterval(() => {
					this.send_txt = this.seconds--
					if (this.seconds < 0) {
						clearInterval(this.timer)
						this.is_send = false
						this.seconds = 60
						this.send_txt = '发送'
						return
					}
				}, 1000)


			},
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.multiArray[1] = this.companys.filter((v) => {
							return v.pid === this.multiArray[0][this.multiIndex[0]].id
						})
						this.form.cid = this.multiArray[1][this.multiIndex[1]].id
						break
					case 1: //拖动第2列
						this.form.cid = this.multiArray[1][this.multiIndex[1]].id
						break
				}
				this.$forceUpdate()
			},
			async submit_register() {
				if (this.form.username === '' || this.form.password === '') {
					uni.showToast({
                        icon: 'none',
                        title: '账号或密码不能为空'
                    });
					return false
				}
				let res = await API.user.register(this.form)
				if (!res.success) {
					this.error_messages = res.message[0]
					return false
				}
				let _this = this
				if (res.success) {
					uni.showToast({title: '注册成功', duration: 2000})
					setTimeout(async function () {
						let res = await API.user.login({
							grant_type: 'password',
							username: _this.form.username,
							password: _this.form.password
						})
						if (!res.success) {
							uni.showModal({
								title: '登陆失败',
								content: res.message,
								showCancel:false
							})
						}
						if (res.success) {
							_this.$store.commit(types.TOKEN, res.data)
							let user = await API.user.fetchUser()
							if (user.success === true) {
								_this.$store.commit(types.LOGIN, user.data)
								uni.reLaunch({url: 'index'})
							}
						}
					}, 2000)
				}
			}
		}
	}
</script>

<style>
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.my-input {
		display: flex;
		margin-left: 10px;
		align-items: center;
	}
	.text-red {
		color: red;
		margin-left: 10px;
	}
</style>
